<!--
 作者 : 唐梓元
 日期 : 2019-05-11
 版本 : 1.0
 描述 : 新增单位时候的弹出工作单位选择,z组件不需要传参
 使用 : <cmAddUnit ></cmAddUnit>
 参数 :
 -->

<template>
  <div class="unitWrapper" >
    <div class="unitContainer">
      <div class="searchContent">
        <span>所属单位/学校：</span>
        <span><input type="text" v-model="workUnit"></span>
        <!--<span><button>查询</button></span>-->
        <img src="../../assets/cha2019-4-30.png" alt="" @click="do_close">
      </div>
      <ul>
        <li>州市
          <ul class="cityUl">
            <li v-for="(item,index) in cityList"
                :key="index" v-text="item.Name"
                :class="classes[index]"
                @click.stop="do_selectCity(item,index)"
            ></li>
          </ul>
        </li>
        <li>区县
          <ul class="XianUl cityUl">
            <li v-for="(item,index) in XianList"
                :key="index" v-text="item.Name"
                :class="classes2[index]"
                @click.stop="do_selectXian(item,index)"
            ></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
  export default {
    name: "cmUnitSelect.vue",
    components:{
    },
    data(){
      return{
        displayBar:true,
        cityList:[],
        classes:[],
        classes2:[],
        XianList:[],
        UnitList:[],
        workUnit:'',
        workUnitSn:"",
        CitySN:''
      }
    },

    created(){
      let me=this
      me.$ZcPublic.UserId= localStorage.getItem('UserId')
      me.selec=!this.selec;
      me.$ZcPublic.Server.Post({
        IsNeedLogin:'false',
        Paras:{
          UserId:me.$ZcPublic.UserId,
          Name:'Vue_WorkUnit',
          Action:'City',
          Data:{
          }
        },
        Callback:me.cb_City,
        Scope:me
      });
    },
    methods:{
      do_selectCity(item,index){
        this.workUnit=item.Name
        this.CitySN=item.SN
        this.classes=[];
        for(let i=0;i<this.cityList.length;i++){
          if(i==index){
            this.classes.push('active')
          }else {
            this.classes.push('noActive')
          }
        };
        let me=this;
        console.log(item)
        me.$ZcPublic.Server.Post({
          IsNeedLogin:'false',
          Paras:{
            UserId:me.$ZcPublic.UserId ,
            Name:'Vue_WorkUnit',
            Action:'Xian',
            Data:{
              CitySN:item.SN
            }
          },
          Callback:me.cb_Xian,
          Scope:me
        });

      },
      do_selectXian(item,index){
        this.workUnit=this.workUnit+"-"+item.Name;
        let unitDate={};
        unitDate.workUnit=this.workUnit;
        unitDate.workUnitSn=item.SN;
        unitDate.CitySN=this.CitySN;
        this.$emit('Unit',unitDate)

      },
      do_close(){
        this.$emit('do_close')
      },
      /*=======*回调==============*/
      cb_City(resJson,scope){
        console.log('城市')
        console.log(resJson)
        this.cityList=resJson.data
      },
      cb_Xian(resJson,scope){
        console.log("区县")
        console.log(resJson);
        this.XianList=resJson.data
      },
    }
  }
</script>

<style scoped>
  .unitWrapper{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    background-color: rgba(0,0,0,.4);
    top:0px
  }
  .unitWrapper .unitContainer{
    width: 640px;
    height: 480px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -320px;
    background-color: #eee;
    /*border: 1px solid red;*/
    border-radius: 4px;
  }
  .unitWrapper .unitContainer .searchContent{
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid gainsboro;
  }
  .unitWrapper .unitContainer .searchContent span:first-child{
    display: inline-block;
    width: 140px;
    text-align: right;

  }
  .unitWrapper .unitContainer .searchContent span:nth-child(2){
    display: inline-block;
    width: 400px;

  }
  .unitWrapper .unitContainer .searchContent span:nth-child(2)>input{
    width: 100%;
    height: 30px;
    border: 1px solid #9DD5F0;
    position: relative;
    /*top:-1px;*/
    outline: none;
  }
  .unitWrapper .unitContainer .searchContent span:nth-child(3)>button{
    height: 30px;
    line-height: 26px;
    width: 50px;
    margin-left: 10px;
    background-image: url(../../assets/footImg2019-4-30.png);
    background-size: 100% 100%;
    border-radius: 2px;
    border: none;
    color: white;
  }
  .unitWrapper .unitContainer .searchContent img{
    width: 24px;
    height: 24px;
    position: absolute;
    top:0;
    right: 0;
    margin-top: -11px;
    margin-right: -11px;
    cursor: pointer;
    /*border-radius: 5;*/
  }
  .unitContainer ul:nth-child(2){
    text-decoration: none;
    list-style: none;
    height:30px;
    line-height: 30px;
    width: 100%;
    background-color: #dedede;
    padding: 0;
    margin: 0;
  }
  .unitContainer>ul>li{
    float: left;
    width: 50%;
    border-right: 1px solid #9DD5F0;
    text-align: center;
  }
  .unitContainer>ul>li:last-child{

    border-right: none;
  }
  .cityUl{
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 408px;
    /*padding: 3px 3px 0px 3px;*/
    overflow: auto;
  }
  .cityUl>li{
    /*width: 100%;*/
    margin: 0 3px 0 3px;
    width: 98%;
    background-color: white;
    /*color: ;*/
    border-bottom: 1px solid gainsboro;
    cursor: pointer;
  }
  .active{
    background-color: #d7e6ef!important
  }
  .UnitUl>li{
    width: 97%;
  }
</style>
